<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>张三 | Awesome-笔记</title>
    <meta name="generator" content="VuePress 1.9.10">
    <link rel="icon" href="icons/favicon.ico">
    <meta name="description" content="">
    <meta name="author" content="热爱生活，喜欢睡觉">
    <meta name="about" content="这是一个专门用于记录笔记的静态资源网站">
    
    <link rel="preload" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css" as="style"><link rel="preload" href="/awesome-notebook/assets/js/app.5520c9b0.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/2.778bb4ad.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/1.50b457b8.js" as="script"><link rel="preload" href="/awesome-notebook/assets/js/31.164808cf.js" as="script"><link rel="prefetch" href="/awesome-notebook/assets/js/10.325b9f09.js"><link rel="prefetch" href="/awesome-notebook/assets/js/11.c62b6b34.js"><link rel="prefetch" href="/awesome-notebook/assets/js/12.ecdb524b.js"><link rel="prefetch" href="/awesome-notebook/assets/js/13.3f3f6a36.js"><link rel="prefetch" href="/awesome-notebook/assets/js/14.eb7a3d07.js"><link rel="prefetch" href="/awesome-notebook/assets/js/15.114dfd5c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/16.85253907.js"><link rel="prefetch" href="/awesome-notebook/assets/js/17.c2838453.js"><link rel="prefetch" href="/awesome-notebook/assets/js/18.3256f17f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/19.d8afd0ae.js"><link rel="prefetch" href="/awesome-notebook/assets/js/20.10e47ab9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/21.33b300c9.js"><link rel="prefetch" href="/awesome-notebook/assets/js/22.b7c97fbe.js"><link rel="prefetch" href="/awesome-notebook/assets/js/23.e9994ecc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/24.8cc3e1e8.js"><link rel="prefetch" href="/awesome-notebook/assets/js/25.dedb1585.js"><link rel="prefetch" href="/awesome-notebook/assets/js/26.9422829f.js"><link rel="prefetch" href="/awesome-notebook/assets/js/27.9802cd87.js"><link rel="prefetch" href="/awesome-notebook/assets/js/28.d9f287bc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/29.dc9b14bd.js"><link rel="prefetch" href="/awesome-notebook/assets/js/3.af33e5d6.js"><link rel="prefetch" href="/awesome-notebook/assets/js/30.645d0efa.js"><link rel="prefetch" href="/awesome-notebook/assets/js/32.59287e4c.js"><link rel="prefetch" href="/awesome-notebook/assets/js/33.3031be3e.js"><link rel="prefetch" href="/awesome-notebook/assets/js/34.4ce6ff0d.js"><link rel="prefetch" href="/awesome-notebook/assets/js/35.d58eebcc.js"><link rel="prefetch" href="/awesome-notebook/assets/js/4.45665f8a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/5.7098d77a.js"><link rel="prefetch" href="/awesome-notebook/assets/js/6.0c0a0f39.js"><link rel="prefetch" href="/awesome-notebook/assets/js/7.6a854e57.js"><link rel="prefetch" href="/awesome-notebook/assets/js/vendors~docsearch.5e19b665.js">
    <link rel="stylesheet" href="/awesome-notebook/assets/css/0.styles.ad5756f5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/awesome-notebook/" class="home-link router-link-active"><img src="/awesome-notebook/imgs/hero.png" alt="Awesome-笔记" class="logo"> <span class="site-name can-hide">Awesome-笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/awesome-notebook/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="三件套" class="dropdown-title"><span class="title">三件套</span> <span class="arrow down"></span></button> <button type="button" aria-label="三件套" class="mobile-dropdown-title"><span class="title">三件套</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          css
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css学习.html" class="nav-link">
  css笔记
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/css/css面试题.html" class="nav-link">
  css面试题
</a></li></ul></li><li class="dropdown-item"><h4>
          js
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/es6语法学习.html" class="nav-link">
  es6语法学习
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js常用操作.html" class="nav-link">
  js常用操作
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js面试题.html" class="nav-link">
  js面试题
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js数据对象及API.html" class="nav-link">
  js常用API
</a></li><li class="dropdown-subitem"><a href="/awesome-notebook/三件套/js/js_knowledge_1.html" class="nav-link">
  其他js知识
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="服务端" class="dropdown-title"><span class="title">服务端</span> <span class="arrow down"></span></button> <button type="button" aria-label="服务端" class="mobile-dropdown-title"><span class="title">服务端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/服务端/express框架.html" class="nav-link">
  express框架
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工程化" class="dropdown-title"><span class="title">工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="工程化" class="mobile-dropdown-title"><span class="title">工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          vue相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/vue/vue2笔记.html" class="nav-link">
  vue2笔记
</a></li></ul></li><li class="dropdown-item"><h4>
          webpack相关
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/awesome-notebook/工程化/webpack相关/webpack使用.html" class="nav-link">
  wepack笔记
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发工具" class="dropdown-title"><span class="title">开发工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="开发工具" class="mobile-dropdown-title"><span class="title">开发工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/开发工具/git笔记.html" class="nav-link">
  git笔记
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序" class="dropdown-title"><span class="title">小程序</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序" class="mobile-dropdown-title"><span class="title">小程序</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/awesome-notebook/小程序相关/微信小程序笔记.html" class="nav-link">
  微信小程序原生
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>张三</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#image-组件" class="sidebar-link">image 组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#text-组件" class="sidebar-link">text 组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#navigator-组件" class="sidebar-link">navigator 组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#scroll-view-组件" class="sidebar-link">scroll-view 组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#设置背景图片" class="sidebar-link">设置背景图片</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#组件的定义、注册、使用" class="sidebar-link">组件的定义、注册、使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#公共组件" class="sidebar-link">公共组件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#页面组件" class="sidebar-link">页面组件</a></li></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#组件的数据及方法" class="sidebar-link">组件的数据及方法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#组件属性-properties" class="sidebar-link">组件属性 properties</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#wxml-的-slot-插槽" class="sidebar-link">wxml 的 slot-插槽</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#默认插槽的使用" class="sidebar-link">默认插槽的使用</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#具名插槽的使用" class="sidebar-link">具名插槽的使用</a></li></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#组件样式" class="sidebar-link">组件样式</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#冒泡事件与非冒泡事件" class="sidebar-link">冒泡事件与非冒泡事件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#事件传参" class="sidebar-link">事件传参</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#data" class="sidebar-link">data-*</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#mark" class="sidebar-link">mark</a></li></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#绑定数据" class="sidebar-link">绑定数据</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#更改-d-单个数据" class="sidebar-link">更改 d 单个数据</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#新增、修改多个属性" class="sidebar-link">新增、修改多个属性</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#修改数组元素" class="sidebar-link">修改数组元素</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#双向数据绑定" class="sidebar-link">双向数据绑定</a></li></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#条件渲染" class="sidebar-link">条件渲染</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#小程序运行机制" class="sidebar-link">小程序运行机制</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#生命周期" class="sidebar-link">生命周期</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#应用生命周期" class="sidebar-link">应用生命周期</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#页面生命周期" class="sidebar-link">页面生命周期</a></li></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#小程序-api" class="sidebar-link">小程序 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#网络请求-wx-request" class="sidebar-link">网络请求 wx.request</a></li></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#界面交互" class="sidebar-link">界面交互</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#loading-加载框" class="sidebar-link">loading 加载框</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#模态对话框" class="sidebar-link">模态对话框</a></li></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#自定义构建-npm" class="sidebar-link">自定义构建 npm</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#vant-weapp-组件库使用" class="sidebar-link">vant Weapp 组件库使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#vant-weapp-样式的修改" class="sidebar-link">vant-weapp 样式的修改</a></li></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#普通分包" class="sidebar-link">普通分包</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#独立分包" class="sidebar-link">独立分包</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#分包预下载" class="sidebar-link">分包预下载</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#获取用户头像" class="sidebar-link">获取用户头像</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#获取用户昵称" class="sidebar-link">获取用户昵称</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#转发功能" class="sidebar-link">转发功能</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#分享到朋友圈" class="sidebar-link">分享到朋友圈</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#页面间通信-eventchannel" class="sidebar-link">页面间通信 eventChannel</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#组件通信-事件总线" class="sidebar-link">组件通信-事件总线</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#消息提示模块封装" class="sidebar-link">消息提示模块封装</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#模态提示框" class="sidebar-link">模态提示框</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#封装本地存储-api" class="sidebar-link">封装本地存储 API</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#请求参数的封装" class="sidebar-link">请求参数的封装</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#快捷请求方法的封装" class="sidebar-link">快捷请求方法的封装</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#拦截器" class="sidebar-link">拦截器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#前端并发请求" class="sidebar-link">前端并发请求</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#loading-效果" class="sidebar-link">loading 效果</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#文件上传-uploadfile" class="sidebar-link">文件上传 uploadFile</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#网络请求总数" class="sidebar-link">网络请求总数</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#小程序环境变量" class="sidebar-link">小程序环境变量</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#接口调用方式" class="sidebar-link">接口调用方式</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#创建-store-对象-mobx-miniprogram" class="sidebar-link">创建 Store 对象 mobx-miniprogram</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#组件中使用数据" class="sidebar-link">组件中使用数据</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#利用组件" class="sidebar-link">利用组件</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#利用-behavior-配置项" class="sidebar-link">利用 Behavior 配置项</a></li></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#fields-与-actions-的写法" class="sidebar-link">fields 与 actions 的写法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#绑定多个-store-对象" class="sidebar-link">绑定多个 store 对象</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#组件扩展-miniprogram-computed" class="sidebar-link">组件扩展 miniprogram-computed</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#安装使用" class="sidebar-link">安装使用</a></li><li class="sidebar-sub-header"><a href="/awesome-notebook/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9B%B8%E5%85%B3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html#同时使用-mobx-和-computed" class="sidebar-link">同时使用 mobx 和 computed</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="张三"><a href="#张三" class="header-anchor">#</a> 张三</h1> <h2 id="image-组件"><a href="#image-组件" class="header-anchor">#</a> image 组件</h2> <ul><li>src：图片资源地址</li> <li>mode:裁剪与缩放模式</li> <li>show-menu-by-longpress：长按展示功能菜单，可将其转发给好友、收藏、保存</li> <li>lazy-load:图片懒加载，滑动到一定距离后展示图片</li></ul> <h2 id="text-组件"><a href="#text-组件" class="header-anchor">#</a> text 组件</h2> <ul><li>user-select:长按显示选中文本</li> <li>space:显示连续空格</li></ul> <h2 id="navigator-组件"><a href="#navigator-组件" class="header-anchor">#</a> navigator 组件</h2> <ul><li>url：跳转链接</li> <li>open-type:跳转方式</li></ul> <h2 id="scroll-view-组件"><a href="#scroll-view-组件" class="header-anchor">#</a> scroll-view 组件</h2> <ul><li>可滚动视图区域，用户通过手指滑动或点击滚动条展示想要的内容</li> <li>scroll-x</li></ul> <h2 id="设置背景图片"><a href="#设置背景图片" class="header-anchor">#</a> 设置背景图片</h2> <ul><li>设置<code>background-image</code>属性即可</li> <li>不能设置 url()内的图片地址为本地图片，要么使用网络图片、要么将图片转换为 base64</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*不能成功显示*/</span>
<span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../1.png'</span><span class="token punctuation">)</span></span>

<span class="token comment">/*本地图片替换为网络图片*/</span>
<span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;1.png&quot;</span><span class="token punctuation">)</span></span>

<span class="token comment">/*图片转base64*/</span>
<span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>......<span class="token punctuation">)</span></span>
</code></pre></div><h1 id="自定义组件化"><a href="#自定义组件化" class="header-anchor">#</a> 自定义组件化</h1> <ul><li>将页面中的功能模块抽取为自定义组件</li> <li>分类：公共组件、页面组件
<blockquote><ul><li>公共组件：放在根目录的 components 文件夹中</li> <li>页面组件：放在对应页面的目录下，一个组件一个文件夹</li></ul></blockquote></li></ul> <h2 id="组件的定义、注册、使用"><a href="#组件的定义、注册、使用" class="header-anchor">#</a> 组件的定义、注册、使用</h2> <h3 id="公共组件"><a href="#公共组件" class="header-anchor">#</a> 公共组件</h3> <ul><li><p>页面内功能模块抽离为自定义组件在不同页面使用</p></li> <li><p>目录结构</p></li></ul> <div class="language- extra-class"><pre class="language-text"><code>|- 根目录
  |- components
    |- custom-checkbox      自定义全局组件
      |- custom-checkbox.wxml       (定义组件内容)
      |- custom-checkbox.js
      |- custom-checkbox.wxss
      |- custom-checkbox.json
  |- pages
    |- index
      |- index.wxml   （使用全局组件）
      |- index.wxss
      |- index.js
      |- index.json
  |- app.json       （注册全局组件）
</code></pre></div><ul><li><p>创建公共组件
<img src="/project-img/小程序相关/新建公共组件.png"></p></li> <li><p><code>app.json</code> 注册组件</p></li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;entryPagePath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/index/index&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">//...</span>
  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//key：自定义组件名</span>
    <span class="token comment">//value：自定义组件路径</span>
    <span class="token property">&quot;custom-checkbox&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./components/custom-checkbox/custom-checkbox&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><code>custom-checkbox.wxml</code>定义组件内容</li></ul> <div class="language- extra-class"><pre class="language-text"><code>&lt;view&gt;我是一个全局组件&lt;/view&gt;
</code></pre></div><ul><li><code>index.wxml</code>使用全局组件：将自定义组件名作为标签即可</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-ckeckbox</span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><h3 id="页面组件"><a href="#页面组件" class="header-anchor">#</a> 页面组件</h3> <ul><li>页面组件：复杂页面拆分为多个低耦合模块</li> <li>目录结构</li></ul> <div class="language- extra-class"><pre class="language-text"><code>|- 根目录
  |- components
  |- pages
    |- index
      |- custom-swiper    自定义页面组件
        |- custom-swiper.wxml     (页面组件内容)
        |- custom-swiper.wxss
        |- custom-swiper.js
        |- custom-swiper.json
      |- index.wxml         (使用页面组件)
      |- index.wxss
      |- index.js
      |- index.json      ( 注册页面组件)
</code></pre></div><ul><li>index.json 注册页面组件</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//key：自定义组件名</span>
    <span class="token comment">//value：自定义组件路径</span>
    <span class="token property">&quot;custom-checkbox&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./custom-swiper/custom-swiper&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><code>custom-swiper.wxml</code>定义页面组件内容</li></ul> <div class="language- extra-class"><pre class="language-text"><code>&lt;view&gt;我是一个页面组件&lt;/view&gt;
</code></pre></div><ul><li><code>index.wxml</code>使用页面组件：将自定义组件名作为标签即可</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-swiper</span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><h2 id="组件的数据及方法"><a href="#组件的数据及方法" class="header-anchor">#</a> 组件的数据及方法</h2> <ul><li>定义在组件.js 文件中</li></ul> <div class="language- extra-class"><pre class="language-text"><code>|- 根目录
  |- components
    |- custom-checkbox      自定义全局组件
      |- custom-checkbox.wxml       (定义组件内容)
      |- custom-checkbox.js
      |- custom-checkbox.wxss
      |- custom-checkbox.json
  |- pages
    |- index
      |- index.wxml   （使用全局组件）
      |- index.wxss
      |- index.js
      |- index.json
  |- app.json       （注册全局组件）
</code></pre></div><ul><li><code>custom-checkbox.js</code>中定义组件的数据和方法</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">//组件初始数据</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token literal-property property">isChecked</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">//组件方法列表</span>
  <span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token function">updateChecked</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">isChecked</span><span class="token operator">:</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>isChecked
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li><code>custom-checkbox.wxml</code>中使用组件的数据和方法</li></ul> <div class="language- extra-class"><pre class="language-text"><code>&lt;view class=&quot;container&quot;&gt;
  &lt;view class=&quot;box&quot;&gt;
    &lt;checkbox checked=&quot;{{isChecked}}&quot; bindtap=&quot;updateChecked&quot;&gt;&lt;/checkbox&gt;
  &lt;/view&gt;
&lt;/view&gt;
</code></pre></div><ul><li><code>custom-checkbox.wxss</code>中定义组件样式</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.container</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><code>index.wxss</code>中调整样式</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">page</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 50rpx<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="组件属性-properties"><a href="#组件属性-properties" class="header-anchor">#</a> 组件属性 properties</h2> <div class="language- extra-class"><pre class="language-text"><code>|- 根目录
  |- components
    |- custom-checkbox      自定义全局组件
      |- custom-checkbox.wxml       (定义组件内容)
      |- custom-checkbox.js
      |- custom-checkbox.wxss
      |- custom-checkbox.json
  |- pages
    |- index
      |- index.wxml   （使用全局组件）
      |- index.wxss
      |- index.js
      |- index.json
  |- app.json       （注册全局组件）
</code></pre></div><ul><li>用于接受组件使用者传递给组件内部的数据</li> <li>custom-checkbox.js</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">properties</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token comment">//简写</span>
    <span class="token literal-property property">label</span><span class="token operator">:</span>String
    <span class="token comment">//全写</span>
    <span class="token literal-property property">label</span><span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token comment">//js基本数据类型</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span>String，
      <span class="token literal-property property">value</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">position</span><span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token literal-property property">type</span><span class="token operator">:</span>String<span class="token punctuation">,</span>
      <span class="token literal-property property">value</span><span class="token operator">:</span><span class="token string">&quot;right&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>custom-checkbox.wxml 定义组件内容，并使用插件语法使用 index.html 传递过来的数据</li></ul> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 其他内容... --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{position==='right' ? 'right' : 'left'}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>{{label}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>index.html 使用组件并向组件传递数据</li></ul> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>我已阅读用户协议<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom-checkbox</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>匿名提交<span class="token punctuation">&quot;</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="wxml-的-slot-插槽"><a href="#wxml-的-slot-插槽" class="header-anchor">#</a> wxml 的 slot-插槽</h2> <blockquote><p>插槽解决了什么问题？
你定义了一个组件并在 index.wxml 页面使用了它，代码如下</p></blockquote> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom01</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>custom01</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>这时你想要在这个组件标签中间插入一段文本，直接插入你会发现这段文本不会显示</p></blockquote> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom01</span><span class="token punctuation">&gt;</span></span>这是插入的文件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>custom01</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>于是你需要先在 custom01 组件的 wxml 文件中使用<code>&lt;slot/&gt;</code>标签来作为占位符，为这段文本占位</p></blockquote> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>重新编译发现文本得以显示</p></blockquote> <ul><li>项目目录结构</li></ul> <div class="language- extra-class"><pre class="language-text"><code>|- 根目录
  |- components
    |- custom01      自定义全局组件
      |- custom01.wxml       (定义组件内容)
      |- custom01.js
      |- custom01.wxss
      |- custom01.json
  |- pages
    |- index
      |- index.wxml   （使用全局组件）
      |- index.wxss
      |- index.js
      |- index.json
  |- app.json       （注册全局组件）
</code></pre></div><h3 id="默认插槽的使用"><a href="#默认插槽的使用" class="header-anchor">#</a> 默认插槽的使用</h3> <ul><li>默认情况下，自定义组件的子节点内容不会进行展示</li> <li>index.wxml</li></ul> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom01</span><span class="token punctuation">&gt;</span></span>
  在index.wxml页面使用全局组件custom01，这段文本就是该组件的子节点
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>custom01</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>要想展示，需要在<strong>组件的 wxml 文件</strong>中配置<code>&lt;slot /&gt;</code>标签</li> <li>custom01.wxml</li></ul> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p><code>&lt;slot /&gt;</code>标签用于接受承载子节点内容，实质上是一个占位符，子节点内容会将 slot 进行替换</p></blockquote> <h3 id="具名插槽的使用"><a href="#具名插槽的使用" class="header-anchor">#</a> 具名插槽的使用</h3> <ul><li>一个组件的 wxml 只能有一个默认插槽 slot，使用多个 slot 需要在<strong>组件的 js 文件</strong>中进行声明</li> <li>custom01.js</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">options</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token comment">//启用多个slot</span>
    <span class="token literal-property property">multipleSlots</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>书写<code>&lt;slot name=&quot;&quot;&gt;</code>标签时携带 name 配置项可以为插槽命名</li> <li>custom01.wxml</li></ul> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>index.wxml 使用全局组件</li></ul> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>custom01</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>显示在顶部的文本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>
  其余文本
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slot-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>显示在底部的文本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>custom01</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="组件样式"><a href="#组件样式" class="header-anchor">#</a> 组件样式</h2> <ul><li><p>组件的 wxss 样式默认只对当前组件生效</p></li> <li><p>自定义<strong>组件的 wxss 文件</strong>不能使用 ID、属性、标签名选择器</p></li> <li><p>custom01.wxss</p></li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*下面的选择器不被允许*/</span>
<span class="token selector">text:</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#content</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">[id=&quot;content&quot;]</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*推荐的选择器：类选择器*/</span>
<span class="token selector">.content</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="事件处理系统"><a href="#事件处理系统" class="header-anchor">#</a> 事件处理系统</h1> <ul><li>小程序事件绑定与网页事件几乎一致</li> <li>小程序绑定事件使用 bind 方法（网页中使用 on 方法)</li> <li>小程序触摸事件 tap(网页中点击事件为 click)</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//方式一：bind:事件名=&quot;handler&quot;</span>
<span class="token operator">&lt;</span>button bind<span class="token operator">:</span>tap<span class="token operator">=</span><span class="token string">&quot;handler&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
<span class="token comment">//方式一：bind事件名=&quot;handler&quot;</span>
<span class="token operator">&lt;</span>button bindtap<span class="token operator">=</span><span class="token string">&quot;handler&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
</code></pre></div><h2 id="冒泡事件与非冒泡事件"><a href="#冒泡事件与非冒泡事件" class="header-anchor">#</a> 冒泡事件与非冒泡事件</h2> <blockquote><p>冒泡事件：一个组件的事件被触发之后，该事件会向父节点传递
非冒泡事件：一个组件的事件被触发之后，该事件不会向父节点传递</p></blockquote> <ul><li>使用 bind 绑定的事件为冒泡事件，可以使用 catch 替换 bind 将该事件转换为非冒泡事件</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>button catch<span class="token operator">:</span>tap<span class="token operator">=</span><span class="token string">&quot;handler&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
</code></pre></div><h2 id="事件传参"><a href="#事件传参" class="header-anchor">#</a> 事件传参</h2> <h3 id="data"><a href="#data" class="header-anchor">#</a> data-*</h3> <ul><li><p>触发事件时将一些数据作为参数传递给事件处理函数的过程</p></li> <li><p>通过<code>data-*</code>的方式</p></li> <li><p><code>event.target</code>事件触发者
<code>event.currentTarget</code>事件绑定者：哪个组件触发了当前事件的处理函数</p></li> <li><p>使用 data-方法传递参数，多个单词由字符-连接</p></li> <li><p>参数传递时，大写字符将自动转化为小写字符</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 多个单词由字符-连接</span>
<span class="token operator">&lt;</span>button data<span class="token operator">-</span>parent<span class="token operator">-</span>id<span class="token operator">=</span><span class="token string">&quot;1&quot;</span> data<span class="token operator">-</span>parent<span class="token operator">-</span>name<span class="token operator">=</span><span class="token string">&quot;tom&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
</code></pre></div><h3 id="mark"><a href="#mark" class="header-anchor">#</a> mark</h3> <ul><li><code>mark:自定义属性</code>传递给事件处理函数</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">mark:</span>id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>100<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handler<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">handler</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>mark<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="绑定数据"><a href="#绑定数据" class="header-anchor">#</a> 绑定数据</h2> <ul><li>小程序页面使用的数据均需要在 Page()的 data 对象中进行声明定义</li> <li>数据声明好后，在 WXML 文件中使用插值语法<code>{{}}</code>将变量包裹起来，从而实现数据绑定</li> <li>在<code>{{}}</code>内部只能写表达式不能写语句，也不能调用 js 方法</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--要展示的数据在wxml中使用双大括号将变量进行包裹--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{obj.age}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--动态绑定属性值时，属性值也需要使用双大括号--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{id}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>绑定属性值<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>checkbox</span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{isChecked}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>checkbox</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--算术运算--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{id+1}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--三元运算--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{id===1?&quot;等于&quot;:&quot;不等于&quot;}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--逻辑判断--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{id===1}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--双大括号只能写表达式不能写语句或js方法--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{if(id===10){}}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{obj.age.toUpperCase()}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">isChecked</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">obj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="更改-d-单个数据"><a href="#更改-d-单个数据" class="header-anchor">#</a> 更改 d 单个数据</h3> <ul><li>修改数据可使用赋值的方式进行修改，但页面的数据不会更新</li> <li>调用 setData()方法进行修改，可以驱动视图更新</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handler<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">updateNum</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">/*使用赋值的方法进行更新，页面数据不会更新*/</span>
    <span class="token comment">// this.data.num+1;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>num <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><blockquote><p>注意：this.setData({</p></blockquote> <div class="language- extra-class"><pre><code>  num:this.data.num++
})这种修改data数据的方式不会生效
</code></pre></div><blockquote><p>在微信小程序中，this.setData 方法用于更新页面数据。然而，this.data.num++ 这种直接修改数据的方式在 this.setData 中并不会生效，因为 this.data 应该被视为一个只读的属性。当你尝试直接修改 this.data 的值时，实际上并不会改变其真正的值。</p></blockquote> <blockquote><p>正确的做法：
let num = this.data.num; num++;</p></blockquote> <h3 id="新增、修改多个属性"><a href="#新增、修改多个属性" class="header-anchor">#</a> 新增、修改多个属性</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token literal-property property">test</span><span class="token operator">:</span><span class="token string">'测试属性'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">userInfo</span><span class="token operator">:</span><span class="token string">''</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">updateInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//新增单个/多个属性</span>
    <span class="token comment">// this.setData({</span>
    <span class="token comment">//   'userInfo.name':'tom',</span>
    <span class="token comment">//   'userInfo.age':10</span>
    <span class="token comment">// })</span>

    <span class="token comment">//修改单个/多个属性</span>
    <span class="token comment">// this.setData({</span>
    <span class="token comment">//   'userInfo.name':'Jerry',</span>
    <span class="token comment">//   'userInfo.age':30</span>
    <span class="token comment">// })</span>

    <span class="token comment">//如果修改的数据很多，每次都写数据路径太麻烦了，</span>
    <span class="token comment">//方法一：使用es6解构  进行修改，</span>
    <span class="token comment">// const userInfo={</span>
    <span class="token comment">//   ...this.data.userInfo,</span>
    <span class="token comment">//   name:'Jerry',   //后定义的属性将会覆盖原有属性</span>
    <span class="token comment">//   age:18,</span>
    <span class="token comment">// }</span>
    <span class="token comment">//方法二：使用ES6 Object.assign()合并</span>
    <span class="token comment">// const userInfo=Object.assign(this.data.userInfo,{name:'Jerry'},{age:20})</span>
    <span class="token comment">// this.setData({</span>
    <span class="token comment">//   userInfo</span>
    <span class="token comment">// })</span>


    <span class="token comment">// 删除单个属性</span>
    <span class="token comment">// delete this.data.userInfo.age</span>
    <span class="token comment">// this.setData({</span>
    <span class="token comment">//   userInfo:this.data.userInfo</span>
    <span class="token comment">// })</span>
    <span class="token comment">// 删除多个属性，使用es6解构</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span>test<span class="token punctuation">,</span><span class="token operator">...</span>rest<span class="token punctuation">}</span><span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>userInfo<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">userInfo</span><span class="token operator">:</span>rest
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="修改数组元素"><a href="#修改数组元素" class="header-anchor">#</a> 修改数组元素</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">list</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">updateData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//新增数组元素,直接向数组中push不能更新页面数据</span>
    <span class="token comment">//方法一：</span>
    <span class="token comment">// this.data.list.push(4)</span>
    <span class="token comment">// this.setData({</span>
    <span class="token comment">//   list:this.data.list</span>
    <span class="token comment">// })</span>
    <span class="token comment">//方法二：</span>
    <span class="token comment">// const newList=this.data.list.concat(4)</span>
    <span class="token comment">// this.setData({</span>
    <span class="token comment">//   list:newList</span>
    <span class="token comment">// })</span>
    <span class="token comment">//方法三：</span>
    <span class="token comment">// const newList=[...this.data.list,4]</span>

    <span class="token comment">//修改数组元素</span>
    <span class="token comment">// 列表一：list:[{id:1,name:'tom'},{id:2,name:&quot;张三&quot;}]</span>
    <span class="token comment">// this.setData({</span>
    <span class="token comment">//   &quot;list[0].name&quot;:&quot;Jerry&quot;</span>
    <span class="token comment">// })</span>
    <span class="token comment">// 列表二：list:[1,2,3]</span>
    <span class="token comment">// this.setData({</span>
    <span class="token comment">//   'list[1]':6</span>
    <span class="token comment">// })</span>

    <span class="token comment">// 删除数组元素</span>
    <span class="token comment">//方式一：</span>
    <span class="token comment">// this.data.list.splice(1,1)</span>
    <span class="token comment">// this.setData({</span>
    <span class="token comment">//   list:this.data.list</span>
    <span class="token comment">// })</span>
    <span class="token comment">//方式二：</span>
    <span class="token keyword">const</span> newList <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item <span class="token operator">!==</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">list</span><span class="token operator">:</span> newList<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="双向数据绑定"><a href="#双向数据绑定" class="header-anchor">#</a> 双向数据绑定</h3> <ul><li>只能是一个单一字段的绑定，,多余了“值为”二字，页面数据修改不会影响原数据</li> <li>不支持数组和对象，</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    <span class="token literal-property property">isChecked</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">obj</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-xml extra-class"><pre class="language-xml"><code><span class="token comment">&lt;!-- 单向绑定：数据能够影响页面 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{value}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token comment">&lt;!-- 双向绑定：数据能影响页面，页面也能影响数据 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">model:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{value}}<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>checkbox</span> <span class="token attr-name"><span class="token namespace">model:</span>checked</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{isChecked}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>是否同意协议<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>checkbox</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="条件渲染"><a href="#条件渲染" class="header-anchor">#</a> 条件渲染</h2> <ul><li>用于控制页面结构的展示和隐藏</li> <li>方式一：wx:if/wx:elif/wx:else：通过新增和移除结构的方式来实现</li> <li>方式二：hidden 属性：通过 css 的 display 属性实现</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">isVisible</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">num</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>num <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-xml extra-class"><pre class="language-xml"><code><span class="token comment">&lt;!-- 通过wx:if判断 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{num===1}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>num 等于{{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>elif</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{num===2}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>num 等于{{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">wx:</span>else</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{num===3}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>num 等于{{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">bind:</span>tap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handler<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击更新num<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 通过hidden属性判断 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{!isVisible}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>isVisible为true则显示结构<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>注意：wx:else 只能与 wx:if 结合使用
wx:if/wx:elif/wx:else 组件的使用不能被打断，必须连贯</p></blockquote> <h1 id="各种生命周期函数"><a href="#各种生命周期函数" class="header-anchor">#</a> 各种生命周期函数</h1> <h2 id="小程序运行机制"><a href="#小程序运行机制" class="header-anchor">#</a> 小程序运行机制</h2> <p><strong>冷启动</strong>：首次打开、销毁后再次打开
<strong>热启动</strong>：小程序已经打开，在一段时间内再次打开
<strong>前台</strong> <strong>后台</strong> <strong>挂起</strong>：进入后台 5 秒，小程序的 js 线程被终止
<strong>销毁</strong>:小程序很久没用、系统资源紧张</p> <h2 id="生命周期"><a href="#生命周期" class="header-anchor">#</a> 生命周期</h2> <ul><li>小程序从启动到销毁的整个过程</li> <li>由应用生命周期，页面生命周期，组件生命周期三个部分组成</li> <li>生命周期伴随着一些函数，称为生命周期函数</li></ul> <h3 id="应用生命周期"><a href="#应用生命周期" class="header-anchor">#</a> 应用生命周期</h3> <ul><li>应用生命周期函数定义在<code>app.js</code>的<code>App()</code>方法中</li> <li>由<code>onLaunch、onShow、onHide</code>三个函数组成</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">/**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */</span>
  <span class="token function-variable function">onLaunch</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */</span>
  <span class="token function-variable function">onShow</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 当小程序从前台进入后台，会触发 onHide
   */</span>
  <span class="token function-variable function">onHide</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */</span>
  <span class="token function-variable function">onError</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="页面生命周期"><a href="#页面生命周期" class="header-anchor">#</a> 页面生命周期</h3> <ul><li>小程序页面从加载、运行、销毁的整个过程</li> <li>tabBar 页面之间的切换页面不会销毁</li> <li>点击左上角返回上一个页面时，会销毁当前页面</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">/**
   * 页面的初始数据
   */</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 生命周期函数--监听页面加载（仅执行一次）
   */</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;页面创建的时候执行&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 生命周期函数--监听页面初次渲染完成，（仅执行一次）
   */</span>
  <span class="token function">onReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;页面初次渲染完成&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 生命周期函数--监听页面显示，后台进入前台时也会触发
   */</span>
  <span class="token function">onShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;页面在前台展示时显示&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 生命周期函数--监听页面隐藏，小程序进入后台时也会触发
   */</span>
  <span class="token function">onHide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 生命周期函数--监听页面卸载
   */</span>
  <span class="token function">onUnload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 页面相关事件处理函数--监听用户下拉动作
   */</span>
  <span class="token function">onPullDownRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 页面上拉触底事件的处理函数
   */</span>
  <span class="token function">onReachBottom</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">/**
   * 用户点击右上角分享
   */</span>
  <span class="token function">onShareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="小程序-api"><a href="#小程序-api" class="header-anchor">#</a> 小程序 API</h2> <ul><li>小程序的 API 几乎都挂载在 wx 对象下</li> <li>异步 API 支持回调函数和 Promise 两种调用方式</li></ul> <h3 id="网络请求-wx-request"><a href="#网络请求-wx-request" class="header-anchor">#</a> 网络请求 wx.request</h3> <ul><li>需要在微信公众平台配置域名，若未配置将会报错</li> <li>可设置不校验合法域名</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>wx<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;https://gmall-prod.atguigu.cn/mall-api/index/findBanner&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;GET&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function-variable function">fail</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function-variable function">complete</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="界面交互"><a href="#界面交互" class="header-anchor">#</a> 界面交互</h2> <h3 id="loading-加载框"><a href="#loading-加载框" class="header-anchor">#</a> loading 加载框</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span>

  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'数据加载中'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">mask</span><span class="token operator">:</span><span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    wx<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span><span class="token string">'https://gmall-prod.atguigu.cn/mall-api/index/findBanner'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">method</span><span class="token operator">:</span><span class="token string">&quot;GET&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">data</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">header</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">success</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">fail</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function-variable function">complete</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        wx<span class="token punctuation">.</span><span class="token function">hiddenLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="模态对话框"><a href="#模态对话框" class="header-anchor">#</a> 模态对话框</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">delHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span>confirm<span class="token punctuation">}</span><span class="token operator">=</span>wx<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'提示'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">content</span><span class="token operator">:</span><span class="token string">'是否删除该商品'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>confirm<span class="token punctuation">)</span><span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'删除成功'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">icon</span><span class="token operator">:</span><span class="token string">'none'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">duration</span><span class="token operator">:</span><span class="token number">2000</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'删除成功'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">icon</span><span class="token operator">:</span><span class="token string">'error'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">duration</span><span class="token operator">:</span><span class="token number">2000</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//</span>
wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">&quot;num&quot;</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span>
wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'obj'</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'tom'</span><span class="token literal-property property">mage</span><span class="token operator">:</span><span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">//删除本地存储</span>
wx<span class="token punctuation">.</span><span class="token function">removeStorageSync</span><span class="token punctuation">(</span><span class="token string">'num'</span><span class="token punctuation">)</span>
<span class="token comment">//</span>

wx<span class="token punctuation">.</span><span class="token function">setStorage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">key</span><span class="token operator">:</span><span class="token string">'num'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span><span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">async</span> <span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">const</span> obj<span class="token operator">=</span><span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">getStorage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">key</span><span class="token operator">:</span><span class="token string">'obj'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="npm-包的使用"><a href="#npm-包的使用" class="header-anchor">#</a> npm 包的使用</h1> <p>打开终端》》npm init -y 初始化 package.json 文件》》npm i @vant/weapp 下载包》》点击【工具&gt;构建 npm】生成 miniprogram_npm 文件存放构建后的 npm 包</p> <blockquote><p>使用 npm 包之前应确定该 npm 包是否支持微信小程序</p></blockquote> <h2 id="自定义构建-npm"><a href="#自定义构建-npm" class="header-anchor">#</a> 自定义构建 npm</h2> <p>实际开发中项目功能越来越多，文件目录越来越复杂，对项目目录结构进行优化，如将源码放在 miniprogram 目录下</p> <div class="language- extra-class"><pre class="language-text"><code>|- 根目录
  |- miniprogram
    |- miniprogram_npm
      |- @vant
        |- weapp
    |- assets
      |- images
    |- pages
      |- index
      |- cate
    |- app.js
    |- app.json
    |- app.wxss
  |- .eslintrc.js
  |- project.config.json
  |- project.private.config.json
</code></pre></div><ul><li>在 project.config.json 中指定 node_modules 的位置</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token comment">//指定小程序源码目录</span>
  <span class="token property">&quot;miniprogramRoot&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./miniprogram/&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;setting&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//开启自定义npm构建方式</span>
    <span class="token property">&quot;packNpmManually&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">//指定构建前后的npm包位置</span>
    <span class="token property">&quot;packNpmRelationList&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token property">&quot;packageJsonPath&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./package.json&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;miniprogramNpmDistDir&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./miniprogram&quot;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
    <span class="token comment">//...</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//...</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="vant-weapp-组件库使用"><a href="#vant-weapp-组件库使用" class="header-anchor">#</a> vant Weapp 组件库使用</h2> <ul><li>一个前端小组件库</li></ul> <blockquote><p>删除 app.json 文件中的配置项<code>style:v2</code>，微信客户端 7.0 开始 ui 界面改版，该配置项的意思是使用最新版的小程序 ui 样式，而其强加了很多样式且这些样式难以覆盖，若想用 vant-weapp 覆盖小程序组件，就必须去除该配置项以避免出现样式混杂的问题</p></blockquote> <div class="language-json extra-class"><pre class="language-json"><code><span class="token comment">//app.json</span>
<span class="token punctuation">{</span>
  <span class="token property">&quot;style&quot;</span><span class="token operator">:</span> <span class="token string">&quot;v2&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>使用步骤
<ul><li>在<strong>组件的 json 文件</strong>或 app.json 中进行注册</li> <li>在<strong>组件的 wxml 文件</strong>直接使用</li></ul></li></ul> <p>在 vant-image 组件中使用插槽</p> <ul><li>app.json 注册组件</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;vant-image&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@vant/weapp/image/index&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;vant-loading&quot;</span><span class="token operator">:</span> <span class="token string">&quot;@vant/weapp/loading/index&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>index.wxml 使用组件</li></ul> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>vant-image</span>
  <span class="token attr-name">use-loading-slot</span>
  <span class="token attr-name">use-error-slot</span>
  <span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-loading</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loading<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>spinner<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>20<span class="token punctuation">&quot;</span></span> <span class="token attr-name">vertical</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>error<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>加载失败<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>vant-image</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="vant-weapp-样式的修改"><a href="#vant-weapp-样式的修改" class="header-anchor">#</a> vant-weapp 样式的修改</h3> <h1 id="小程序分包"><a href="#小程序分包" class="header-anchor">#</a> 小程序分包</h1> <h2 id="普通分包"><a href="#普通分包" class="header-anchor">#</a> 普通分包</h2> <p>将小程序不同功能代码分别打包为不同子包，构建时按需加载</p> <div class="language- extra-class"><pre class="language-text"><code>|- root
  |- modules    放置分包
    |- goodMoudle     配置一个分包
      |- pages
        |- detail
        |- list
  |- assets
  |- pages

</code></pre></div><ul><li>在<code>app.json</code>中配置字段：<code>subPackage</code>即可</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;pages/index/index&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;pages/cate/cate&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;pages/cart/cart&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;pages/my/my&quot;</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;window&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;tabBar&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">//用于控制分包</span>
  <span class="token property">&quot;subPackges&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;modules/goodModule&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;goodMoudle&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;pages/list/list&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;pages/detail/detail&quot;</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="独立分包"><a href="#独立分包" class="header-anchor">#</a> 独立分包</h2> <ul><li><p>独立于主包和其他分包</p></li> <li><p>从独立分包中的界面进入小程序不需要下载主包</p></li> <li><p>通常用于放置一些相对独立的功能</p></li> <li><p>在<code>app.json</code>中进行配置（在<code>subPackage</code>字段内配置<code>independent</code>字段）</p></li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">//...</span>
  <span class="token property">&quot;subPackges&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;modules/markModule&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;markModule&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;pages/market/market&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token property">&quot;independent&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>独立分包不能依赖主包和其他分包中的资源，全局样式文件<code>app/wxss</code>对独立分包无效</li> <li>独立分包中不能定义 APP</li></ul> <h2 id="分包预下载"><a href="#分包预下载" class="header-anchor">#</a> 分包预下载</h2> <ul><li>访问小程序某个页面时，预先下载其他分包中的代码和资源</li> <li>在<code>app.json</code>中配置<code>preloadRule</code>字段</li></ul> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;pages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">//...</span>
  <span class="token property">&quot;subPackges&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;preloadRule&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//主包预下载分包</span>
    <span class="token comment">//该配置项的意义为：进入页面pages/index/index后预下载分包goodModule</span>
    <span class="token property">&quot;pages/index/index&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;network&quot;</span><span class="token operator">:</span> <span class="token string">&quot;all&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;goodModule&quot;</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">//独立分包预下载主包</span>
    <span class="token property">&quot;modules/marketModule/pages/market/market&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;network&quot;</span><span class="token operator">:</span> <span class="token string">&quot;all&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;packages&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;__APP__&quot;</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h1 id="开放能力"><a href="#开放能力" class="header-anchor">#</a> 开放能力</h1> <h2 id="获取用户头像"><a href="#获取用户头像" class="header-anchor">#</a> 获取用户头像</h2> <ul><li>button 组件 open-type 的值设置为 chooseAvatar</li> <li>通过 bindchooseavatar 事件回调函数获取到头像的临时路径</li></ul> <div class="language- extra-class"><pre class="language-text"><code>|- 根目录
  |- pages
    |- index
      |- index.html
      |- index.js
      |- index.wxss
      |- index.json
</code></pre></div><ul><li>index.wxss</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.btn</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.btn::after</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.avatar</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200rpx<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200rpx<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>index.html</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>avatar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{avatarUrl}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chooseAvatar<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindchooseavatar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>chooseavatar<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>index.js</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">avatarUrl</span><span class="token operator">:</span> <span class="token string">&quot;../assets/1.png&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">chooseavatar</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> avatarUrl <span class="token punctuation">}</span> <span class="token operator">=</span> event<span class="token punctuation">.</span>detail<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      avatarUrl<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="获取用户昵称"><a href="#获取用户昵称" class="header-anchor">#</a> 获取用户昵称</h2> <ul><li>index.wxss</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">input</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #179c16<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 20rpx<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 60rpx<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 20rpx<span class="token punctuation">;</span>
  <span class="token property">padding-left</span><span class="token punctuation">:</span> 20rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>index.html</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 使用form组件包裹input以及button组件 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">bindsubmit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSubmit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- input输入框组件的type属性设置为 nickname--&gt;</span>
    <span class="token comment">&lt;!-- 添加name属性，form组件会自动收集带有name属性的表单元素的值 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nickname<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nickname<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入昵称<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token comment">&lt;!-- 设置form-type=&quot;submit&quot; 就会将按钮变为提交按钮 --&gt;</span>
    <span class="token comment">&lt;!-- 点击提交按钮触发表单的bindsubmit事件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span> <span class="token attr-name">form-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击获取昵称<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>index.js</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">avatarUrl</span><span class="token operator">:</span> <span class="token string">&quot;../assets/1.png&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">chooseavatar</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">onSubmit</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> nickname <span class="token punctuation">}</span> <span class="token operator">=</span> event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="转发功能"><a href="#转发功能" class="header-anchor">#</a> 转发功能</h2> <ul><li><code>index.js</code>文件声明<code>onShareAppMessage</code>事件监听函数，并自定义转发内容，定义了该事件处理函数，右上角才会出现“转发按钮”</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onShareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;测试内容&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&quot;/pages/cate/cate&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">imageUrl</span><span class="token operator">:</span> <span class="token string">&quot;../assets/1/png&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>index.html，给 button 组件设置属性<code>open-type=&quot;share&quot;</code>，用户点击按钮后触发<code>onShareAppMessage</code>函数</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">open-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>share<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击转发<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="分享到朋友圈"><a href="#分享到朋友圈" class="header-anchor">#</a> 分享到朋友圈</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">//监听页面按钮的转发 以及 右上角按钮</span>
  <span class="token function">onshareAppMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">//监听右上角分享到朋友圈按钮</span>
  <span class="token function">onShareTimeLine</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;分享到朋友圈&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token string">&quot;id=1&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">imageUrl</span><span class="token operator">:</span> <span class="token string">&quot;../assets/1.png&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="组件通信方法"><a href="#组件通信方法" class="header-anchor">#</a> 组件通信方法</h1> <ul><li>获取全局 APP 对象</li></ul> <div class="language- extra-class"><pre class="language-text"><code>|- 根目录
  |- pages
    |- index
    |- profile
      |- peofile.html
      |- profile.js
      |- profile.wxss
      |- profile.json
  |- app.js
  |- app.json
  |- app.wxss
</code></pre></div><ul><li>app.js</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">//全局共享数据</span>
  <span class="token literal-property property">globalData</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">//全局共享方法</span>
  <span class="token function">setToken</span><span class="token punctuation">(</span><span class="token parameter">token</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>globalData<span class="token punctuation">.</span>token <span class="token operator">=</span> token<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>profile.wxml</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>login<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>登录<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>profile.js</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> appInstance <span class="token operator">=</span> <span class="token function">getApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">login</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    appInstance<span class="token punctuation">.</span><span class="token function">setToken</span><span class="token punctuation">(</span><span class="token string">&quot;sshianshuaos&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// console.log()</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="页面间通信-eventchannel"><a href="#页面间通信-eventchannel" class="header-anchor">#</a> 页面间通信 eventChannel</h2> <ul><li><p>原理：通过 wx.navigateTo 打开一个页面，这两个页面之间将会建立一条数据通道 eventchannel</p></li> <li><p>场景：通过 index.wxml 跳转到 list.wxml 页面</p></li> <li><p>index.wxml</p></li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handler<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>index.js</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;/pages/list/list&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">events</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// key:被打开页面通过eventChannel发射的事件</span>
        <span class="token comment">// value:回调</span>
        <span class="token comment">// 为事件添加监听器，获取被打开页面传递给当前页面的数据</span>
        <span class="token function-variable function">currentEvent</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">success</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//通过success回调的形参，获取eventChannel对象</span>
        <span class="token comment">//eventChannel对象提供了emit方法，可用于发射事件同时携带参数</span>
        res<span class="token punctuation">.</span>eventChannel<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">&quot;myevent&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;张三&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>list.js</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLoad</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 获取eventChannel对象</span>
    <span class="token keyword">const</span> EventChannel <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getOpenerEventChannel</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 通过eventChannel提供的on方法监听页面发射的自定义事件</span>
    EventChannel<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;myevent&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 通过EventChannel的emit方法也可向上一级页面传递数据</span>
    EventChannel<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;curentEvent&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="组件通信-事件总线"><a href="#组件通信-事件总线" class="header-anchor">#</a> 组件通信-事件总线</h2> <h1 id="通用模块封装"><a href="#通用模块封装" class="header-anchor">#</a> 通用模块封装</h1> <ul><li>一些通用函数，我们使用时只关心其功能，如果每次使用都调用完整的 API，会使得代码很冗余</li></ul> <h2 id="消息提示模块封装"><a href="#消息提示模块封装" class="header-anchor">#</a> 消息提示模块封装</h2> <ul><li>创建一个 toast 方法对 wx.showToast()进行封装</li> <li>toast()接受一个对象作为参数，对象中包含 title、icon、duration、mask 等参数，</li> <li>封装的方法挂载到 <code>wx</code> 全局对象身上</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//utils/extendApi.js</span>
<span class="token keyword">function</span> <span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  title <span class="token operator">=</span> <span class="token string">&quot;数据加载中&quot;</span><span class="token punctuation">,</span>
  icon <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">,</span>
  mask <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  duration <span class="token operator">=</span> <span class="token number">3000</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    title<span class="token punctuation">,</span>
    icon<span class="token punctuation">,</span>
    mask<span class="token punctuation">,</span>
    duration<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
wx<span class="token punctuation">.</span>toast <span class="token operator">=</span> toast<span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> toast <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//app.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> toast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;utils/extendApi.js&quot;</span><span class="token punctuation">;</span>
<span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;数据加载失败&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">mask</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="模态提示框"><a href="#模态提示框" class="header-anchor">#</a> 模态提示框</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//  utils/extendApi.js</span>
<span class="token keyword">function</span> <span class="token function">modal</span><span class="token punctuation">(</span><span class="token parameter">options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> defaultOptions <span class="token operator">=</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;提示&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">&quot;是否确定执行该操作&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">confirmColor</span><span class="token operator">:</span> <span class="token string">&quot;#efefef&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> finalOptions <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> defaultOptions<span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span>
    wx<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token operator">...</span>finalOptions<span class="token punctuation">,</span>
      <span class="token function">complete</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> confirm<span class="token punctuation">,</span> cancel <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        confirm <span class="token operator">&amp;&amp;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        cancel <span class="token operator">&amp;&amp;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> promise<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> modal <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> modal <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;utils/extendApi.js&quot;</span><span class="token punctuation">;</span>
<span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">onLaunch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">modal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">&quot;重新登录&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">showCancel</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="封装本地存储-api"><a href="#封装本地存储-api" class="header-anchor">#</a> 封装本地存储 API</h2> <p>s</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//utils/storage.js</span>
<span class="token keyword">function</span> <span class="token function">setStorage</span><span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">存储发生错误</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>e<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">getStorage</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> value <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> value<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">获取指定 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 数据发生错误:</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">removeStorage</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">removeStorageSync</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">移除指定 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 数据发生错误:</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">clearStorage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">clearStorageSync</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">&quot;清空本地存储时发生错误:&quot;</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> setStorage<span class="token punctuation">,</span> getStorage<span class="token punctuation">,</span> removeStorage<span class="token punctuation">,</span> clearStorage <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="网络请求封装"><a href="#网络请求封装" class="header-anchor">#</a> 网络请求封装</h1> <div class="language-js extra-class"><pre class="language-js"><code>wx<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function">success</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token function">success</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">fail</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">complete</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>wx.request()方法采用回调函数接收返回的值，容易导致回调地狱问题
封装的网络请求模块包含功能：</li></ul> <ol><li>使用 request 实例方法发送请求</li> <li>包含 get、delete、put、post 等实例方法可以快捷的发送网络请求</li> <li>包含 请求拦截器、响应拦截器</li> <li>包含 uploadFile 将本地资源上传到服务器 API</li> <li>包含 all 并发请求方法</li> <li>同时优化了并发请求时 loading 显示效果</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// utils/wx-request</span>
<span class="token keyword">class</span> <span class="token class-name">WxRequest</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

  <span class="token function">request</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      wx<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token operator">...</span>options<span class="token punctuation">,</span>
        <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token function">resolve</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">fail</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WxRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> instance<span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.js</span>
<span class="token keyword">import</span> instance <span class="token keyword">from</span> <span class="token string">&quot;utils/wx-request&quot;</span><span class="token punctuation">;</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> instance<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;https://gmall-prod.atguigu.cn/mall-api/index/findBanner&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;GET&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="请求参数的封装"><a href="#请求参数的封装" class="header-anchor">#</a> 请求参数的封装</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//Utils/wx-request</span>
<span class="token keyword">class</span> <span class="token class-name">WxRequest</span><span class="token punctuation">{</span>
  defaults<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token literal-property property">baseUrl</span><span class="token operator">:</span><span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span><span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span><span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token literal-property property">method</span><span class="token operator">:</span><span class="token string">&quot;GET&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">header</span><span class="token operator">:</span><span class="token punctuation">{</span>
      <span class="token string-property property">'Content-type'</span><span class="token operator">:</span><span class="token string">'application/json'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">timeout</span><span class="token operator">:</span><span class="token number">60</span><span class="token operator">*</span><span class="token number">1000</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">params<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>defaults<span class="token operator">=</span>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>defaults<span class="token punctuation">,</span>params<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token function">request</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    options<span class="token punctuation">.</span>url<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseUrl<span class="token operator">+</span>options<span class="token punctuation">.</span>url<span class="token punctuation">,</span>
    options<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>defaults<span class="token punctuation">,</span><span class="token operator">...</span>options<span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span>reject</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      wx<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token comment">//...</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> instance<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">WxRequest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">baseUrl</span><span class="token operator">:</span><span class="token string">&quot;https://gmall-prod.atguigu.cn/mall-api&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">timeout</span><span class="token operator">:</span><span class="token number">5000</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> instance
</code></pre></div><h2 id="快捷请求方法的封装"><a href="#快捷请求方法的封装" class="header-anchor">#</a> 快捷请求方法的封装</h2> <ul><li><p>问题：如果每次都使用 request()方法发送请求，当项目的接口地址变多之后，不够简洁</p></li> <li><p>解决方案：封装四个快捷方法<code>get/delete/post/put</code>简化 request()的调用</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Utils/wx-request</span>
<span class="token keyword">class</span> <span class="token class-name">WxRequest</span> <span class="token punctuation">{</span>
  <span class="token comment">//coding...</span>

  <span class="token function">get</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> config <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;GET&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> config<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">post</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> config <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;POST&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> config<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">put</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> config <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;PUT&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> config<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">delete</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> data <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> config <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">&quot;DELETE&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> config<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WxRequest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">baseURL</span><span class="token operator">:</span> <span class="token string">&quot;https://gmall-prod.atguigu.cn/mall-api&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">timeout</span><span class="token operator">:</span> <span class="token number">15000</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> instance<span class="token punctuation">;</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//test.js</span>
<span class="token keyword">import</span> instance <span class="token keyword">from</span> <span class="token string">&quot;utils/wx-request&quot;</span><span class="token punctuation">;</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> instance<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/index/findBanner&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="拦截器"><a href="#拦截器" class="header-anchor">#</a> 拦截器</h2> <ul><li><p>请求拦截器：发送请求之前做点什么（本质：在请求之前调用的函数，用于对请求参数进行新增或修改）</p> <blockquote><p>请求拦截应用场景：在发送请求时，购物车列表、收货地址、更新头像等接口，都需要进行权限验证，因此我们需要在请求拦截器中判断本地是否存在访问令牌 <code>token</code> ，如果存在就需要在请求头中添加 <code>token</code> 字段</p></blockquote></li> <li><p>响应拦截器：拿到响应数据做点什么（本质：在得到响应之后调用的函数）</p></li></ul> <blockquote><p>响应拦截器应用场景：在使用 wx.request 发送网络请求时。只要成功接收到服务器返回，无论<code>statusCode</code>是多少，都会进入 <code>success</code> 回调。因此开发者根据业务逻辑对返回值进行判断。
响应拦截器中我们要判断请求成功、请求失败，然后进行不同的业务逻辑处理</p> <ol><li>请求成功后，将响应成功的数据传递给响应拦截器，同时在传递的数据中新增 <code>isSuccess: true</code> 字段，表示请求成功</li> <li>请求失败后，将响应失败的数据传递给响应拦截器，同时在传递的数据中新增 <code>isSuccess: false</code> 字段，表示请求失败</li></ol></blockquote> <p>实现思路</p> <ol><li>WxRequest 类内部定义 interceptors 实例属性，属性中应包含 request 和 response 方法</li> <li>实例的请求响应拦截器会 <strong>覆盖</strong> 类默认的请求响应拦截器</li> <li>发送请求之前调用请求拦截器</li> <li>服务器响应之后，无关 statusCode 是否为 200，都调用响应拦截器</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//  Utils/request.js</span>
<span class="token keyword">class</span> <span class="token class-name">WxRequest</span><span class="token punctuation">{</span>
  <span class="token comment">//code....</span>
  interceptors<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token function-variable function">request</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span>config<span class="token punctuation">,</span>
    <span class="token function-variable function">response</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span>response
  <span class="token punctuation">}</span>
  <span class="token function">request</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span>reject</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
      wx<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token operator">...</span>options<span class="token punctuation">,</span>
        <span class="token function-variable function">success</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
          <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">)</span><span class="token punctuation">{</span>
            res<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span><span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">response</span><span class="token operator">:</span>res<span class="token punctuation">,</span><span class="token literal-property property">isSuccess</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token function">resolve</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">fail</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
          <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">)</span><span class="token punctuation">{</span>
            err<span class="token operator">=</span><span class="token keyword">this</span><span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span><span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">response</span><span class="token operator">:</span>err<span class="token punctuation">,</span><span class="token literal-property property">isSuccess</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> instance<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">WxRequest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">baseUrl</span><span class="token operator">:</span><span class="token string">'https://gmall-prod.atguigu.cn/mall-api'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">timeout</span><span class="token operator">:</span><span class="token number">5000</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 设置请求拦截器</span>
instance<span class="token punctuation">.</span><span class="token function">setRequestInterceptor</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    config<span class="token punctuation">.</span>header<span class="token punctuation">[</span><span class="token string">'token'</span><span class="token punctuation">]</span><span class="token operator">=</span>wx<span class="token punctuation">.</span><span class="token function">getStorageSync</span><span class="token punctuation">(</span><span class="token string">'token'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> config
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">//设置响应拦截器</span>
instance<span class="token punctuation">.</span><span class="token function">setResponseInterceptor</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token literal-property property">response</span><span class="token operator">:</span> res<span class="token punctuation">,</span> isSuccess <span class="token punctuation">}</span> <span class="token operator">=</span> response
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isSuccess<span class="token punctuation">)</span> <span class="token punctuation">{</span>
     wx<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token string">'网络异常，请稍后重试~'</span><span class="token punctuation">)</span>
     <span class="token keyword">return</span> res
  <span class="token punctuation">}</span>
  <span class="token keyword">switch</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>code<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">//业务状态码200，接口请求成功</span>
    <span class="token keyword">case</span> <span class="token number">200</span><span class="token operator">:</span>
      <span class="token keyword">return</span> res<span class="token punctuation">.</span>data
    <span class="token comment">//业务状态码208，没有token或者token过期失效</span>
    <span class="token keyword">case</span> <span class="token number">208</span><span class="token operator">:</span>
      <span class="token keyword">const</span> modalStatus<span class="token operator">=</span><span class="token keyword">await</span> wx<span class="token punctuation">.</span><span class="token function">modal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'提示'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">content</span><span class="token operator">:</span><span class="token string">'登录授权过期'</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>modalStatus<span class="token punctuation">)</span><span class="token punctuation">{</span>
        wx<span class="token punctuation">.</span><span class="token function">clearStorageSync</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">url</span><span class="token operator">:</span><span class="token string">'/pages/login/login'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span>
    <span class="token comment">//业务状态码为其他，请求或响应出现了异常</span>
    <span class="token keyword">default</span><span class="token operator">:</span>
      wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span><span class="token string">'接口调用失败'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">icon</span><span class="token operator">:</span><span class="token string">'none'</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> response<span class="token punctuation">.</span>data
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> instance
</code></pre></div><h2 id="前端并发请求"><a href="#前端并发请求" class="header-anchor">#</a> 前端并发请求</h2> <ul><li><p>在前端页面同时向后端发起多个请求的情况，当一个页面需要请求多个接口获取数据时，为了提高页面的加载速度和用户体验，可以同时发起多个请求，这些请求之间就是并发的关系</p></li> <li><p>方式一：使用 <code>async</code> 和 <code>await</code> 同步发送数据</p></li> <li><p>缺点：请求只能一个一个地发送， 这就会造成请求阻塞，影响渲染速度</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>
</code></pre></div><ul><li>方式二：使用 Promise.all()方法同时发送多个异步请求</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">async</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>res1<span class="token punctuation">,</span>res2<span class="token punctuation">]</span><span class="token operator">=</span><span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    instance<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/mall-api/index/findBanner'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    instance<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/mall-api/index/findCategory1'</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span><span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res1<span class="token punctuation">,</span>res2<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>将 Promise.all（）封装在在 WxRequest 实例中 <code>all</code> 方法</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// utils/request.js</span>
<span class="token keyword">class</span> <span class="token class-name">WxRequest</span> <span class="token punctuation">{</span>
  <span class="token function">all</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>promise</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>promise<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// /pages/test/test.js</span>
<span class="token keyword">import</span> instance <span class="token keyword">from</span> <span class="token string">&quot;utils/http&quot;</span><span class="token punctuation">;</span>
<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">[</span>res1<span class="token punctuation">,</span> res2<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">await</span> instance<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      instance<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;mall-api/index/findBanner&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      instance<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;mall-api/index/findCategory1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="loading-效果"><a href="#loading-效果" class="header-anchor">#</a> loading 效果</h2> <ul><li>请求发送前, 通过<code>wx.showLoading</code>展示 loading 效果</li> <li>获得响应数据后，调用 wx.hideLoading 隐藏 loading</li></ul> <p>实现步骤</p> <ul><li>在 WxRequest 类的默认请求配置项中，设置 isLoading 默认值为 true，显示 loading</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">WxRequest</span> <span class="token punctuation">{</span>
  defaults <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
<span class="token operator">+</span>    isLoading<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否显示 loading 提示框</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>实例化时，配置 isLoading 配置为 false，隐藏 loading</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WxRequest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">baseURL</span><span class="token operator">:</span> <span class="token string">&quot;https://gmall-prod.atguigu.cn/mall-api&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">isLoading</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 隐藏 loading</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>发送网络请求时，传入请求配置 isLoading 为 false，隐藏 loading
<blockquote><p>在封装的网络请求中，wx.showLoading 默认显示 loading 效果，但实际开发中，有些接口不需要显示 loading、或者开发者希望能够自己控制 loading 样式或交互，这就需要关闭默认 loading</p></blockquote></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">async</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">await</span> instance<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/index/findCategory1'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">isLoading</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>内部实现</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">WxRequest</span> <span class="token punctuation">{</span>
  <span class="token comment">// 初始化默认的请求属性</span>
  defaults <span class="token operator">=</span> <span class="token punctuation">{</span>
      <span class="token comment">// 其他配置...</span>
<span class="token operator">+</span>     isLoading<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否显示 loading 提示框</span>
  <span class="token punctuation">}</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">params <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token function">request</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// coding...</span>
<span class="token operator">+</span>     <span class="token comment">// 发送请求之前添加 loding</span>
<span class="token operator">+</span>     <span class="token keyword">if</span> <span class="token punctuation">(</span>options<span class="token punctuation">.</span>isLoading<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token operator">+</span>       <span class="token keyword">this</span><span class="token punctuation">.</span>queue<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> wx<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token operator">+</span>       <span class="token comment">// 然后想队列中添加 request 标识，代表需要发送一次新请求</span>
<span class="token operator">+</span>       <span class="token keyword">this</span><span class="token punctuation">.</span>queue<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'request'</span><span class="token punctuation">)</span>
<span class="token operator">+</span>     <span class="token punctuation">}</span>

    <span class="token comment">// 请求之前，触发请求拦截器</span>
    <span class="token comment">// 如果存在请求拦截器，则触发请求拦截器</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      options <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// 使用 Promise 封装异步请求</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// 使用 wx.request 发起请求</span>
      wx<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token operator">...</span>options<span class="token punctuation">,</span>
        <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">fail</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">complete</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token comment">// 接口调用完成后隐藏 loding</span>
          <span class="token comment">// wx.hideLoading()</span>

 <span class="token operator">+</span>          <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>options<span class="token punctuation">.</span>isLoading<span class="token punctuation">)</span> <span class="token keyword">return</span>

          <span class="token comment">// 每次请求结束后，从队列中删除一个请求标识</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>queue<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
          <span class="token comment">// 如果队列已经清空，在往队列中添加一个标识</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>queue<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>queue<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'request'</span><span class="token punctuation">)</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>timerId <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>queue<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>queue<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> wx<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="文件上传-uploadfile"><a href="#文件上传-uploadfile" class="header-anchor">#</a> 文件上传 uploadFile</h2> <p><strong>原 API</strong></p> <div class="language-js extra-class"><pre class="language-js"><code> wx<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  
  <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 必填项，开发者服务器地址  </span>
  <span class="token literal-property property">filePath</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// 必填项，要上传文件资源的路径 (本地路径)  </span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token comment">// 必填项，文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容})</span>
</code></pre></div><h2 id="网络请求总数"><a href="#网络请求总数" class="header-anchor">#</a> 网络请求总数</h2> <blockquote><p>|- utils</p></blockquote> <div class="language- extra-class"><pre><code>|- http.js        实例化WxRequest
|- request.js     封装网络请求模块WxRequest
|- storage.js     封装本地存储模块
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// utils/http.js</span>
<span class="token keyword">import</span> WxRequest <span class="token keyword">from</span> <span class="token string">&quot;./request.js&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getStorage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;./storage&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 类实例化</span>
<span class="token keyword">const</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WxRequest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">baseUrl</span><span class="token operator">:</span> <span class="token string">&quot;https//gmall-prod.atguigu.cn/mall-api&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">timeout</span><span class="token operator">:</span> <span class="token number">1500</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//添加请求拦截器</span>
instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span><span class="token function-variable function">request</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token function">getStorage</span><span class="token punctuation">(</span><span class="token string">&quot;token&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    config<span class="token punctuation">.</span>header<span class="token punctuation">[</span><span class="token string">&quot;token&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> config<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 添加响应拦截器</span>
instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span><span class="token function-variable function">response</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> isSuccess<span class="token punctuation">,</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> response<span class="token punctuation">;</span>

  <span class="token comment">// 如果 isSuccess 为 false，说明执行了 fail 回调函数</span>
  <span class="token comment">// 这时候就说明网络异常，需要给用户提示网络异常</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isSuccess<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;网络异常请重试&quot;</span><span class="token punctuation">,</span>
      <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">&quot;error&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> response<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 判断服务器响应的业务状态码</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 如果后端返回的业务状态码等于 200，说请求成功，服务器成功响应了数据</span>
    <span class="token keyword">case</span> <span class="token number">200</span><span class="token operator">:</span>
      <span class="token comment">// 对服务器响应数据做点什么……</span>
      <span class="token keyword">return</span> data<span class="token punctuation">;</span>

    <span class="token comment">// 如果返回的业务状态码等于 208，说明 没有 token，或者 token 失效</span>
    <span class="token comment">// 就需要让用户登录或者重新登录</span>
    <span class="token keyword">case</span> <span class="token number">208</span><span class="token operator">:</span>
      <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">modal</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">&quot;鉴权失败，请重新登录&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">showCancel</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 不显示取消按钮</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 清除之前失效的 token ，同时要清除本地存储的全部信息</span>
        <span class="token function">clearStorage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        wx<span class="token punctuation">.</span><span class="token function">navigateTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">&quot;/pages/login/login&quot;</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">default</span><span class="token operator">:</span>
      <span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&quot;程序出现异常，请联系客服或稍后重试&quot;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

      <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> instance<span class="token punctuation">;</span>
</code></pre></div><h2 id="小程序环境变量"><a href="#小程序环境变量" class="header-anchor">#</a> 小程序环境变量</h2> <ul><li><p>不同开发环境，调用的接口地址不用，如开发环境需调用开发板接口地址，生产环境需调用正式版接口地址</p> <table><thead><tr><th>环境</th> <th>对应值</th></tr></thead> <tbody><tr><td>开发版</td> <td>develop</td></tr> <tr><td>体验版</td> <td>trial</td></tr> <tr><td>正式版</td> <td>release</td></tr></tbody></table></li> <li><p>根据环境不同，给 env 变量设置不同的请求基准路径</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 获取 小程序账号信息</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> miniProgram <span class="token punctuation">}</span> <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getAccountInfoSync</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 获取小程序当前开发环境</span>
<span class="token comment">// develop 开发版, trial 体验版, release 正式版</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> envVersion <span class="token punctuation">}</span> <span class="token operator">=</span> miniProgram

<span class="token keyword">let</span> env <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">baseURL</span><span class="token operator">:</span> <span class="token string">'https://gmall-prod.atguigu.cn'</span>
<span class="token punctuation">}</span>

<span class="token keyword">switch</span> <span class="token punctuation">(</span>envVersion<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">case</span> <span class="token string">'develop'</span><span class="token operator">:</span>
    env<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">'https://gmall-prod.atguigu.cn'</span>
    <span class="token keyword">break</span>

  <span class="token keyword">case</span> <span class="token string">'trial'</span><span class="token operator">:</span>
    env<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">'https://gmall-prod.atguigu.cn'</span>
    <span class="token keyword">break</span>

  <span class="token keyword">case</span> <span class="token string">'release'</span><span class="token operator">:</span>
    env<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">'https://gmall-prod.atguigu.cn'</span>
    <span class="token keyword">break</span>

  <span class="token keyword">default</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> env <span class="token punctuation">}</span>
</code></pre></div><h2 id="接口调用方式"><a href="#接口调用方式" class="header-anchor">#</a> 接口调用方式</h2> <ul><li>实际开发中将所有网络请求方法放在 api 目录下统一管理，按照模块功能来划分成对应的文件，在文件中将接口封装成一个个方法单独导出</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// api/index.js</span>
<span class="token keyword">import</span> http <span class="token keyword">from</span> <span class="token string">&quot;utils/http&quot;</span><span class="token punctuation">;</span>
<span class="token comment">/**
 * @description 获取首页轮播图数据
 */</span>
<span class="token keyword">const</span> <span class="token function-variable function">reqSwiperData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> http<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/index/findBanner&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token punctuation">{</span> reqSwiperData <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="框架扩展"><a href="#框架扩展" class="header-anchor">#</a> 框架扩展</h1> <ul><li>mobx-miniprogram:轻量级状态管理库，用于管理状态，其状态一旦改变，所有关联组件状态都会改变</li></ul> <blockquote><p>安装使用：需下载两个包</p></blockquote> <ul><li>mobx-miniprogram:创建 store 对象用于存储应用数据</li> <li>mobx-miniprogram-bindings:将状态和组件、页面进行绑定</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> i mobx-miniprogram mobx-miniprogram-bindings
</code></pre></div><h2 id="创建-store-对象-mobx-miniprogram"><a href="#创建-store-对象-mobx-miniprogram" class="header-anchor">#</a> 创建 Store 对象 mobx-miniprogram</h2> <ul><li><code>mobx-miniprogram</code> 三个核心概念
<blockquote><ol><li><code>observable</code>：用于创建一个被监测的对象，对象的属性就是应用的状态(state)，这些状态会被转换成响应式数据。</li> <li><code>action</code>：用于修改状态(state)的方法，需要使用 action 函数显式的声明创建。</li> <li><code>computed</code>：根据已有状态(state)生成的新值。计算属性是一个方法，在方法前面必须加上 <code>get</code> 修饰符</li></ol></blockquote></li></ul> <div class="language- extra-class"><pre class="language-text"><code>|-miniprogram
   |- stores
   |- ...
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// stores/index.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> observable<span class="token punctuation">,</span> action <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;mobx-miniprogram&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 使用 observable 创建一个被监测的对象</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> numStore <span class="token operator">=</span> <span class="token function">observable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 创建应用状态</span>
  <span class="token literal-property property">numA</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token literal-property property">numB</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>

  <span class="token comment">// 使用 action 更新 numA 以及 numB</span>
  <span class="token literal-property property">update</span><span class="token operator">:</span> <span class="token function">action</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>numA <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>numB <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

  <span class="token comment">// 计算属性，使用 get 修饰符，</span>
  <span class="token keyword">get</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>numA <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>numB<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="组件中使用数据"><a href="#组件中使用数据" class="header-anchor">#</a> 组件中使用数据</h2> <ul><li><p>在 <code>Page</code> 或者<code>Component</code>中对共享的数据进行读取、更新操作，需要使用 <code>mobx-miniprogram-bindings</code>将 <code>Store</code> 和 页面或组件进行绑定关联</p></li> <li><p>在组件 Component 中使用状态，需要 从<code>mobx-miniprogram-bindings</code> 库中导入 <code>ComponentWithStore</code> 方法，并将 <code>Component</code> 方法替换成 <code>ComponentWithStore</code> 方法，原本组件配置项也需要写到该方法中，新增一个 <code>storeBindings</code> 配置项，配置项常用的属性有以下三个：</p> <blockquote><ol><li><code>store</code>: 指定要绑定的 <code>Store</code> 对象</li> <li><code>fields</code>: 指定需要绑定的 <code>data</code> 字段</li> <li><code>actions</code>: 指定需要映射的 <code>actions</code> 方法</li></ol></blockquote></li></ul> <h3 id="利用组件"><a href="#利用组件" class="header-anchor">#</a> 利用组件</h3> <div class="language- extra-class"><pre class="language-text"><code>| -miniprogram
  |- stores
+      |- index.js
  |- components
    |- custom01
+      |- custom01.js
      |- custom01.josn
      |- custom01.scss
+      |- custom01.wxml  定义组件结构
  |- pages
    |- test
      |- test.js
      |- test.josn
      |- test.scss
+      |- test.wxml   页面内使用组件
+  |- app.json  全局引入
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// stores/index.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> observable<span class="token punctuation">,</span> action <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;mobx-miniprogram&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 使用 observable 创建一个被监测的对象</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> numStore <span class="token operator">=</span> <span class="token function">observable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 创建应用状态</span>
  <span class="token literal-property property">numA</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token literal-property property">numB</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token comment">// 使用 action 更新 numA 以及 numB</span>
  <span class="token literal-property property">update</span><span class="token operator">:</span> <span class="token function">action</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>numA <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>numB <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

  <span class="token comment">// 计算属性，使用 get 修饰符，</span>
  <span class="token keyword">get</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>numA <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>numB<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>组件</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ComponentWithStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;mobx-miniprogram-bindings&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> numStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;../../stores/index&quot;</span><span class="token punctuation">;</span>
<span class="token function">ComponentWithStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">storeBindings</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//指定store对象</span>
    <span class="token literal-property property">store</span><span class="token operator">:</span> numStore<span class="token punctuation">,</span>
    <span class="token comment">//指定要绑定的data字段</span>
    <span class="token literal-property property">fields</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;numA&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;numB&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sum&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token comment">//指定需要映射的actions方法</span>
    <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;update&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>组件全局注册</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// app.json</span>
<span class="token punctuation">{</span>
  <span class="token comment">//...全局注册</span>
  <span class="token string-property property">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&quot;custom01&quot;</span><span class="token operator">:</span><span class="token string">&quot;./components/custom01/custom01&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
  <span class="token comment">//...</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>页面内使用组件</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// pages/test.wxml</span>
<span class="token operator">&lt;</span>custom01 <span class="token operator">&gt;</span>
</code></pre></div><h3 id="利用-behavior-配置项"><a href="#利用-behavior-配置项" class="header-anchor">#</a> 利用 Behavior 配置项</h3> <div class="language- extra-class"><pre class="language-text"><code>|-miniprogram
  |- stores
+     |- index.js   定义store
  |- pages
    |- test
+      |- behavior.js   引入store并设置behavior
+      |- test.js   引入并配置behavior
      |- test.josn
      |- test.scss
+      |- test.wxml   将组件结构拆分出来
-  |- app.json      无须引入components
</code></pre></div><ul><li>定义 store</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// stores/index.js</span>

<span class="token comment">// ... （内容略）</span>
</code></pre></div><ul><li>引入 store 并设置 behavior</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// behavior.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> BehaviorWithStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;mobx-miniprogram-bindings&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> numStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;../../stores/numstore&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> indexBehavior <span class="token operator">=</span> <span class="token function">BehaviorWithStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">storeBindings</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">store</span><span class="token operator">:</span> numStore<span class="token punctuation">,</span>
    <span class="token literal-property property">fields</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;numA&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;numB&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sum&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;update&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>引入并配置 behavior</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//Pages/test/test.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> indexBehavior <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;./behavior&quot;</span><span class="token punctuation">;</span>

<span class="token function">Page</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">behaviors</span><span class="token operator">:</span> <span class="token punctuation">[</span>indexBehavior<span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">// ... 其他配置项</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>将组件结构拆分出来</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{numA}}+{{numB}}={{sum}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>update<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点击更新响应式数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="fields-与-actions-的写法"><a href="#fields-与-actions-的写法" class="header-anchor">#</a> fields 与 actions 的写法</h2> <ul><li><p><code>fields</code>、<code>actions</code> 有两种写法：数组 或者 对象</p></li> <li><p><code>fields</code> 的数组写法</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">storeBindings</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">store</span><span class="token operator">:</span> numStore<span class="token punctuation">,</span>
    <span class="token literal-property property">fields</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'numA'</span><span class="token punctuation">,</span> <span class="token string">'numB'</span><span class="token punctuation">,</span> <span class="token string">'sum'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'update'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><code>fields</code> 的对象写法有两种：
<blockquote><ol><li>映射形式：指定 data 中哪些字段来源于 <code>store</code> 以及它们在 <code>store</code> 中对应的名字。形式：<code>{key:value}</code></li></ol></blockquote> <ul><li>例如 <code>{ a: 'numA', b: 'numB' }</code> <blockquote><ol start="2"><li>函数形式：指定 data 中每个字段的计算方法。形式：<code>&lt;key:()=&gt;{return value}&gt;</code></li></ol></blockquote></li> <li>例如 <code>{ a: () =&gt; store.numA, b: () =&gt; anotherStore.numB }</code> <blockquote><p>注意：fields 的对象写法中 </p><p color="red">key:可自定义，value：store 中的变量名</p><p></p></blockquote></li></ul></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">storeBindings</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">store</span><span class="token operator">:</span> numStore<span class="token punctuation">,</span>
    <span class="token literal-property property">fields</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// 使用函数方式获取 Store 中的数据</span>
      <span class="token function-variable function">a</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> store<span class="token punctuation">.</span>numA<span class="token punctuation">,</span>
      <span class="token function-variable function">b</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> store<span class="token punctuation">.</span>numB<span class="token punctuation">,</span>

      <span class="token comment">// 使用映射形式获取 Store 中的数据，值为数据在 store 中对应的名字</span>
      <span class="token literal-property property">total</span><span class="token operator">:</span> <span class="token string">'sub'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</code></pre></div><ul><li>actions 的数组写法</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">storeBindings</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">store</span><span class="token operator">:</span> numStore<span class="token punctuation">,</span>
    <span class="token literal-property property">fields</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'numA'</span><span class="token punctuation">,</span> <span class="token string">'numB'</span><span class="token punctuation">,</span> <span class="token string">'sum'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'update'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
</code></pre></div><ul><li>actions 的对象写法只有一种：映射形式</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">storeBindings</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">store</span><span class="token operator">:</span> numStore<span class="token punctuation">,</span>
    <span class="token literal-property property">fields</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">//...</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 使用映射形式获取 Store 中的 action 名字</span>
    <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// key 自定义，为当前组件中调用的方法</span>
      <span class="token comment">// 值为 store 中对应的 action 名字</span>
      <span class="token literal-property property">buttonTap</span><span class="token operator">:</span> <span class="token string">'update'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre></div><h2 id="绑定多个-store-对象"><a href="#绑定多个-store-对象" class="header-anchor">#</a> 绑定多个 store 对象</h2> <ul><li><p>一个页面或者组件可能会绑定多个 <code>Store</code> ，此时将 <code>storeBindings</code> 改造成数组。数组每一项就是一个个要绑定的 <code>Store</code>。</p></li> <li><p>多个 <code>Store</code> 中存在相同的数据，显示会出现异常。通过 <code>namespace</code> 属性给当前 <code>Store</code> 开启命名空间，在开启命名空间以后，访问数据的时候，需要加上 <code>namespace</code> 的名字即可解决冲突</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// behavior.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> BehaviorWithStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;mobx-miniprogram-bindings&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> numStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;../../stores/numstore&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> indexBehavior <span class="token operator">=</span> <span class="token function">BehaviorWithStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">storeBindings</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">namespace</span><span class="token operator">:</span> <span class="token string">&quot;numStore&quot;</span><span class="token punctuation">,</span> <span class="token comment">//开启命名空间</span>
      <span class="token literal-property property">store</span><span class="token operator">:</span> numStore<span class="token punctuation">,</span>
      <span class="token literal-property property">fields</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;numA&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;numB&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;sum&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;update&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code>//访问store 对象中的数据，加上对应的命名空间即可
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{ numStore.numA }} + {{ numStore.numB }} = {{numStore.sum}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="组件扩展-miniprogram-computed"><a href="#组件扩展-miniprogram-computed" class="header-anchor">#</a> 组件扩展 miniprogram-computed</h2> <ul><li>小程序框架没有提供计算属性相关的 api，使用计算属性可提高页面性能</li></ul> <h3 id="安装使用"><a href="#安装使用" class="header-anchor">#</a> 安装使用</h3> <ul><li>安装</li></ul> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">npm</span> <span class="token function">install</span> miniprogram-computed
</code></pre></div><ul><li>在组件中使用计算属性功能，需要 <code>miniprogram-computed</code> 库中导入 <code>ComponentWithComputed</code> 方法并将 <code>Component</code> 方法替换成 <code>ComponentWithComputed</code> 方法</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ComponentWithComputed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'miniprogram-computed'</span>

<span class="token function">ComponentWithComputed</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">1</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">total</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 注意：</span>
      <span class="token comment">// computed 函数中不能访问 this ，只有 data 对象可供访问</span>
      <span class="token comment">// 这个函数的返回值会被设置到 this.data.sum 字段中</span>
      <span class="token keyword">return</span> data<span class="token punctuation">.</span>a <span class="token operator">+</span> data<span class="token punctuation">.</span>b
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 同时对 a 和 b 进行监听</span>
    <span class="token string-property property">'a, b'</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">total</span><span class="token operator">:</span> a <span class="token operator">+</span> b
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">updateData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>a <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
        <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>b <span class="token operator">+</span> <span class="token number">1</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token literal-property property">watch</span><span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span>value
<span class="token literal-property property">key</span><span class="token operator">:</span>要监听的数据
<span class="token literal-property property">value</span><span class="token operator">:</span>回调函数<span class="token punctuation">,</span>形参为改变之后的数据
<span class="token function-variable function">a</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
consolr<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token string-property property">'a, b'</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">total</span><span class="token operator">:</span> a <span class="token operator">+</span> b
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="同时使用-mobx-和-computed"><a href="#同时使用-mobx-和-computed" class="header-anchor">#</a> 同时使用 mobx 和 computed</h3> <ul><li>使用了 <code>ComponentWithComputed</code> 方法构建组件，Mobx 写法使用旧版 <code>API</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ComponentWithComputed <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;miniprogram-computed&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 导入 storeBindingsBehavior 方法实现组件和 Store 的关联</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> storeBindingsBehavior <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;mobx-miniprogram-bindings&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 导入 Store</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> numStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;../../stores/numstore&quot;</span><span class="token punctuation">;</span>
<span class="token function">ComponentWithComputed</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">behaviors</span><span class="token operator">:</span> <span class="token punctuation">[</span>storeBindingsBehavior<span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">sum</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">total</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> data<span class="token punctuation">.</span>a <span class="token operator">+</span> data<span class="token punctuation">.</span>b <span class="token operator">+</span> data<span class="token punctuation">.</span>sum<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">storeBindings</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>如果使用了 <code>ComponentWithStore</code> 方法构建组件，计算属性写法使用旧版 <code>API</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ComponentWithStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'mobx-miniprogram-bindings'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>numsStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../stores/numStore'</span>
<span class="token comment">// component.js</span>
<span class="token keyword">const</span> computedBehavior <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'miniprogram-computed'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>behavior

<span class="token function">ComponentWithStore</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">behaviors</span><span class="token operator">:</span> <span class="token punctuation">[</span>computedBehavior<span class="token punctuation">]</span><span class="token punctuation">,</span>

  <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">sum</span><span class="token operator">:</span> <span class="token number">2</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">total</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> data<span class="token punctuation">.</span>a <span class="token operator">+</span> data<span class="token punctuation">.</span>b <span class="token operator">+</span> data<span class="token punctuation">.</span>sum <span class="token comment">// data.c 为自定义 behavior 数据段</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 实现组件和 Store 的关联</span>
  <span class="token literal-property property">storeBindings</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/awesome-notebook/assets/js/app.5520c9b0.js" defer></script><script src="/awesome-notebook/assets/js/2.778bb4ad.js" defer></script><script src="/awesome-notebook/assets/js/1.50b457b8.js" defer></script><script src="/awesome-notebook/assets/js/31.164808cf.js" defer></script>
  </body>
</html>
